<template>
  <!-- <h1>aaaa</h1> -->
  <!-- {{ i }} -->
  <q-select class="col-12" :model-value="下注数[i]" outlined hide-selected behavior="menu" :options="options"
    @input-value="setModel" label="￥" label-color="orange" use-input fill-input @filter="filterFn">
    <template v-slot:before>
      <span class="圆">{{ i }}</span>
      <div class="号码">
        <span v-for="i in item">{{ i }} ,</span>
      </div>
    </template>
  </q-select>
  <!-- {{ 下注数[i] }} -->
</template>

<script setup>
import { ref, reactive } from "vue";
const model = ref(null);

function filterFn(val, update, abort) {
  update(() => {
    const needle = val;
    options.value = aoptions.filter(
      (v) => v.indexOf(needle) > -1
    );
  });
}

function setModel(val) {
  model.value = val;
  emit('update:肖下注数', props.i, val)
}

// const aoptions = [5, 10, 15, 20, 50, 100, 150, 200, 500, 1000];
const aoptions = ['5', '10', '15', '20', '50', '100', '150', '200', '500', '1000'];
const options = ref(aoptions);
// const options = ref(["bbb", "google"]);
const props = defineProps({
  i: {
    type: String,
    default: 0,
  },
  item: {
    type: Array,
    default: 0,
  },
  下注数: {

  },
});

const emit = defineEmits(['update:肖下注数'])
</script>
